<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="7">
        <div
          class="grid-content quotatree"
          style="border: 1px solid #d8dce5; height: 700px"
        >
          <QuotaTree :showcheckbox="false" @computedQuota="quotaChange"/>
        </div>
      </el-col>
      <el-col :span="17">
        <el-row :gutter="1">
          <el-col :span="4">
            <div class="block">
              <el-cascader
                ref="cascader"
                placeholder="试试搜索：西宁"
                size="medium"
                collapse-tags
                clearable
                :show-all-levels="false"
                v-model="checkDimList"
                :options="dimList"
                :props="dimProps"
                filterable>
              </el-cascader>
            </div>
          </el-col>
          <el-col :span="2">
            <el-button icon="el-icon-aim" type="primary" plain @click="dimensionFilter">按维度筛选</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table
              @cell-click="cellClick"
              @cell-mouse-leave="cellMouseLeave"
              v-loading="loading"
              :data="quotaValueList"
              row-key="id"
              border
            >
              <el-table-column prop="dimensionNames" align="center" label="相关维度" :show-overflow-tooltip="true"
                               width="350"></el-table-column>
              <el-table-column prop="code" align="center" label="指标代码" :show-overflow-tooltip="true">
                <template slot-scope="{row}">
                  <template v-if="row.edit">
                    <el-input v-model="row.code" minlength="2" maxlength="10" size="small"/>
                  </template>
                  <span v-else>{{ row.code }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="value" align="center" label="指标值/合计"
                               :show-overflow-tooltip="true">
                <template slot-scope="{row}">
                  <span>{{ row.value ? row.value : row.sm }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="av" align="center" label="平均值" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="mx" align="center" label="最大值" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="mn" align="center" label="最小值" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="ct" align="center" label="计数" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column align="center" label="详情">
                <template slot-scope="{row}">
                  <el-button icon="el-icon-more" @click="getDetail(row.quotaId)" circle></el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
            <el-dialog
              v-dialog-drag
              v-loading="dialogLoading"
              element-loading-text="查找溯源较耗时间,请稍等..."
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              title="详细信息"
              :visible.sync="detailDialog"
              width="30%">
              <el-dialog
                width="30%"
                title="指标溯源"
                :visible.sync="innerVisible"
                append-to-body>
                <div>
                  <el-tree
                    :data="sourceData"
                    :props="sourceProps"
                    accordion>
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                          <span>{{ node.label }}</span>
                          <span>{{ data.formula ? data.formula : '' }}</span>
                        </span>
                  </el-tree>
                </div>
              </el-dialog>
              <div>
                <el-form class="formStyle" label-position="left" inline>
                  <el-form-item label="指标类型:">
                    <span>{{ quotaDetail.type }}</span>
                  </el-form-item>
                  <el-form-item label="创建类型:">
                    <span>{{ quotaDetail.createType }}</span>
                  </el-form-item>
                  <el-form-item label="创建人:">
                    <span>{{ quotaDetail.createBy }}</span>
                  </el-form-item>
                  <el-form-item label="创建时间:">
                    <span>{{ quotaDetail.createDate }}</span>
                  </el-form-item>
                  <el-form-item v-show="quotaDetail.formula" label="计算公式:">
                    <span style="color: #36a3f7;cursor: pointer;text-decoration:underline;"
                          @click="lookSource(quotaDetail.quotaId)">{{ quotaDetail.formula }}</span>
                  </el-form-item>
                  <el-form-item v-show="quotaDetail.sql" label="SQL语句:">
                    <span>{{ quotaDetail.sql }}</span>
                  </el-form-item>
                  <el-form-item v-show="quotaDetail.datasource" label="数据源:">
                    <span>{{ quotaDetail.datasource }}</span>
                  </el-form-item>
                  <el-form-item v-show="quotaDetail.sql" label="数据源名称:">
                    <span>{{ quotaDetail.datasourceName }}</span>
                  </el-form-item>
                </el-form>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="detailDialog = false">关 闭</el-button>
              </span>
            </el-dialog>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import QuotaTree from '@/views/quota/modeling/QuotaTree.vue'
  import { getBeMixedTree, getQuotaDetail, list, lookForSource, updateValue } from '@/api/quota/define/define'

  export default {
    name: 'Value',
    components: { QuotaTree },
    data() {
      return {
        loading: false,
        detailDialog: false,
        innerVisible: false,
        quotaValueList: [],
        dimList: [],
        checkDimList: [],
        quotaDetail: {},
        dimProps: {
          multiple: true,
          expandTrigger: 'hover',
          value: 'id',
          label: 'dimensionName'
        },
        sourceData: [],
        dialogLoading: false,
        sourceProps: {
          children: 'rootIds',
          label: 'quotaName'
        },
        total: 0,
        pageNum: 1,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          quotaId: undefined,
          //这样传吧
          dimIds: []
        }
      }
    },

    methods: {
      lookSource(id) {
        this.dialogLoading = true
        lookForSource(id).then(res => {
          this.sourceData = res.data
          this.innerVisible = true
          this.dialogLoading = false
        })
      },
      getDetail(id) {
        getQuotaDetail(id).then(res => {
          this.quotaDetail = res.data
          this.detailDialog = true
        })
      },
      cellClick(row, column) {
        if (column.property === 'code') {
          row.edit = true
        }
      },
      cellMouseLeave(row) {
        if (row.edit) {
          row.edit = false
          if (row.code) {
            let data = {
              id: row.id,
              code: row.code
            }
            updateValue(data).then((res) => {
              if (res.data) {
                this.msgSuccess('指标代码已修改')
              }
            }).catch(() => {
              this.msgError('指标代码修改失败,请稍后重试')
            })
          }
        }
      },
      resetParams() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          quotaId: undefined,
          dimIds: []
        }
        this.pageNum = 1
        this.queryParams.dimIds = []
        if (this.checkDimList.length > 0) {
          this.$refs.cascader.panel.clearCheckedNodes()
          this.checkDimList = []
        }
      },
      quotaChange(quota) {
        this.resetParams()
        this.queryParams.quotaId = quota.id
        this.getList()
        if (quota.id) {
          //同时加载维度
          getBeMixedTree([quota.id]).then(res => {
            this.dimList = this.handleTree(res.data, 'id', 'upperId')
          })
        }
      },
      dimensionFilter() {
        if (this.checkDimList.length <= 0) {
          this.msgError('未选择维度无法筛选')
          return
        }
        this.getList()
      },
      getList() {
        this.loading = true
        if (this.checkDimList.length > 0) {
          //只获取子节点
          let dimNodeArr = this.$refs.cascader.getCheckedNodes(true)
          let dimArr = []
          dimNodeArr.forEach(item => {
            let obj = {
              dimId: item.value,
              rootId: item.path[0]
            }
            dimArr.push(obj)
          })
          //重新赋值 避免条件堆积
          this.queryParams.dimIds = dimArr
        }
        list(this.queryParams).then(response => {
          this.quotaValueList = response.data.list.map(item => {
            item.edit = false
            return item
          })
          this.total = response.data.totalCount
          this.loading = false
        })

      }
    }
  }
</script>

<style lang="less">

  .formStyle .el-form-item__label{
    color: #001528;
  }

  .el-tree {
    display: inline-block;
  }

  .quotatree {
    overflow: auto;
    text-align: left;
  }

  .el-cascader__search-input {
    height: 0px;
  }
</style>
